<template>
  <div style="display:flex;height:100%;width:100%" @mouseleave="draw.show=true" @contextmenu.capture="configPanel">
    <cli-area v-if="!!webObject" :webObject="webObject"></cli-area>
    <cfg-template-current-config v-if="!!webObject" :e="e" :webObject="webObject"></cfg-template-current-config>
<!--    <tpl-config :draw="draw" :webObject="webObject" @mouseout.prevent="draw.show=false"></tpl-config>-->
  </div>


</template>

<script>
import TplTable from "@/pages/testPage/template/client/cli-table";
import templateWeb from "@/pages/testPage/template/model/templateWeb";
import CliArea from "@/pages/testPage/template/client/cli-area";
import CfgTemplateCurrentConfig from "@/pages/testPage/template/config/cfg-template-current-config";
export default {
  name: "index",
  components: {CfgTemplateCurrentConfig, CliArea, TplTable},
  data(){
    return {
      e:null,
      webObject:null,
      draw:{
        show:false,
      },
      web:{
        layout:[
          {
            id:this.tools.uuid(),
            name:'root',
            type:'root',
            attr:{},
            style:{width:'100%',height:'100%',borderWidth:'1px',borderColor:'gray',borderStyle:'solid'},
            source:'data',
            children:[]
          }
        ],
        elements:[
          {
            address:'root',
            type:'table',
            config:{
              columns:[
                {
                  title:'abc1',
                  slot:'values.abc1',
                  config:{
                    type:'text',
                  }
                },
                {
                  title:'abc1',
                  slot:'values.abc2',
                  config:{
                    type:'text'
                  }
                },
              ],
            }
          }
        ],
        source:[
          {
            sourceName:'',
            model:'',
            type:'',
            className:'',
            condition:'',
          }
        ]
      },
      source:{
        data:[
          {
            type:'crawMaterial',
            className:'bill',
            values:{
              abc1:'abc1111',
              abc2:'abc2'
            }
          },
          {
            type:'crawMaterial',
            className:'bill',
            values:{
              abc1:'abc1',
              abc2:'abc2'
            }
          }
        ]
      },

    }
  },
  beforeMount() {
    this.webObject=templateWeb.create();
    // this.webObject.record.elements.push(templateWeb.tableConfig())
    // this.webObject.source={
    //   data:[
    //     {
    //       type:'crawMaterial',
    //       className:'bill',
    //       values:{
    //         abc1:'abc1111',
    //         abc2:'abc2'
    //       }
    //     },
    //     {
    //       type:'crawMaterial',
    //       className:'bill',
    //       values:{
    //         abc1:'abc1',
    //         abc2:'abc2'
    //       }
    //     }
    //   ]
    // }
  },
  methods:{
    configPanel(e){
      e.preventDefault();
      this.e=e;
      console.log(e)
    }
  }

}
</script>

<style scoped>


</style>
